<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>html中使用样式的三种方式</title>
</head>
<style>
  .box {
    width: 200px;
    height: 100px;
    background-color: rgb(224, 167, 167);
  }
</style>
<body>
  1.行内/内联样式
  <div style="width: 200px; height: 100px; background-color: rgb(180, 233, 131);">在标签内使用style属性写样式</div>
  <br>
  2.内部样式 
  <div class="box">在 head 部分通过 style 标签定义内部样式表</div>
  3.外部样式
  <div class="out_css_box">
    在 head 部分通过 link 标签引入外部的 css 文件
  </div>
  注意：一般公司会要求使用第2和第3种方式写样式，便于维护和复用
</body>
</html>